<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>日志监控终端</title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="cache_enhancements.css">
</head>
<body>
    <div class="container">
        <header>
            <div class="header-main">
                <div class="header-left">
                    <h1>日志监控终端</h1>
                    <div class="connection-status">
                        <span id="status-indicator"></span>
                        <span id="status-text">未连接</span>
                    </div>
                </div>
                <div class="header-right">
                    <!-- 设备计数器和会话信息已移动到底部状态栏 -->
                </div>
            </div>
            <div class="filter-bar">
                <div class="filter-primary">
                    <div class="search-box">
                        <span class="material-icons">search</span>
                        <input type="text" id="search-input" placeholder="搜索日志内容...">
                    </div>
                    <div class="filter-group">
                        <button id="level-filter-btn" class="filter-btn">
                            <span class="material-icons">filter_list</span>
                            <span id="level-filter-text">所有级别</span>
                            <span class="material-icons">expand_more</span>
                        </button>
                    </div>
                    <button id="filters-toggle" class="icon-btn filters-toggle" title="展开模块筛选器">
                        <span class="material-icons">expand_more</span>
                        <span class="toggle-text">展开模块筛选器</span>
                    </button>
                </div>
                
                <div class="filter-secondary" id="filter-secondary">
                    <div class="filter-group">
                        <select id="module-filter" class="compact-select">
                            <option value="all" selected>所有模块</option>
                        </select>
                        <select id="session-filter" class="compact-select">
                            <option value="all">所有会话</option>
                            <option value="current">当前会话</option>
                        </select>
                    </div>
                    <div class="action-buttons">
                        <button id="toggle-auto-scroll" class="icon-btn" title="自动滚动">
                            <span class="material-icons">vertical_align_bottom</span>
                        </button>
                        <button id="toggle-deduplication" class="icon-btn" title="去重模式">
                            <span class="material-icons">filter_list</span>
                        </button>
                        <button id="clear-logs" class="btn-danger">
                            <span class="material-icons">delete</span>
                            清除日志
                        </button>
                    </div>
                </div>
            </div>
        </header>
        <main>
            <!-- Sidebar overlay for mobile -->
            <div class="sidebar-overlay" id="sidebar-overlay"></div>
            
            <div class="main-content">
                <div class="sidebar">
                    <div class="sidebar-header">
                        <h3>设备列表</h3>
                        <button id="sidebar-toggle" class="icon-btn" title="切换侧边栏">
                            <span class="material-icons">menu</span>
                        </button>
                    </div>
                    <div class="device-list" id="device-list">
                        <!-- 设备列表将通过JavaScript动态添加，不包括【全部设备】选项 -->
                    </div>
                </div>

                <div class="content">
                    <div class="log-viewer">
                        <div class="log-header">
                            <div class="log-status">
                                <span class="material-icons">circle</span>
                                <span>实时日志</span>
                            </div>
                            <div class="log-actions">
                                <button id="back-to-realtime" class="icon-btn" style="display: none;">
                                    <span class="material-icons">refresh</span>
                                    返回实时
                                </button>
                                <button id="collapse-all-sessions" class="icon-btn" title="折叠所有会话">
                                    <span class="material-icons">unfold_less</span>
                                </button>
                            </div>
                        </div>
                        <div id="log-container" class="log-content">
                            <!-- 日志内容将通过JavaScript动态添加 -->
                        </div>
                    </div>
                </div>
            </div>
        </main>
        <footer>
            <div class="footer-content">
                <div class="footer-left">
                    <div class="stats">
                        总日志数：<span id="log-count" class="highlight">0</span>
                        | 活跃设备：<span id="active-devices-count" class="highlight">0</span>
                    </div>
                    <div class="device-stats">
                        <div class="stat-item">
                            <span class="stat-label">会话总数：</span>
                            <span id="device-total-sessions" class="stat-value">-</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-label">首次连接：</span>
                            <span id="device-first-connected" class="stat-value">-</span>
                        </div>
                    </div>
                </div>
                <div class="footer-center">
                    <div class="session-id-card">
                        <div class="session-label">
                            <span class="material-icons">fingerprint</span>
                            当前会话
                        </div>
                        <div class="session-id-content">
                            <span id="current-session-id" class="session-id-value">-</span>
                            <button id="copy-session-id" class="icon-btn" aria-label="复制会话ID">
                                <span class="material-icons">content_copy</span>
                            </button>
                        </div>
                    </div>
                </div>

            </div>
        </footer>
    </div>
    <!-- 右键菜单 -->
    <div id="context-menu" class="context-menu">
        <div class="context-menu-item" data-action="copy">
            <span class="material-icons">content_copy</span>复制
        </div>
        <div class="context-menu-item danger" data-action="delete">
            <span class="material-icons">delete</span>删除
        </div>
    </div>

    <!-- 级别筛选弹窗 -->
    <div id="level-filter-modal" class="modal-overlay">
        <div class="modal-content">
            <div class="modal-header">
                <h3>选择日志级别</h3>
                <button id="close-level-modal" class="icon-btn">
                    <span class="material-icons">close</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="level-filter" class="checkbox-filter">
                    <div class="checkbox-item">
                        <input type="checkbox" id="level-all" value="all" checked>
                        <label for="level-all">所有级别</label>
                    </div>
                    <div class="checkbox-item">
                        <input type="checkbox" id="level-debug" value="debug">
                        <label for="level-debug">调试</label>
                    </div>
                    <div class="checkbox-item">
                        <input type="checkbox" id="level-info" value="info">
                        <label for="level-info">信息</label>
                    </div>
                    <div class="checkbox-item">
                        <input type="checkbox" id="level-warning" value="warning">
                        <label for="level-warning">警告</label>
                    </div>
                    <div class="checkbox-item">
                        <input type="checkbox" id="level-error" value="error">
                        <label for="level-error">错误</label>
                    </div>
                    <div class="checkbox-item">
                        <input type="checkbox" id="level-exception" value="exception">
                        <label for="level-exception">异常</label>
                    </div>
                    <div class="checkbox-item">
                        <input type="checkbox" id="level-emergency" value="emergency">
                        <label for="level-emergency">紧急</label>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button id="reset-level-filter" class="btn-secondary">重置</button>
                <button id="apply-level-filter" class="btn-primary">应用</button>
            </div>
        </div>
    </div>
    
    <script src="script_enhanced.js"></script>
    <div id="toast" class="toast" role="status" aria-live="polite"></div>
</body>
</html>